<template>
    <div>
        <van-row>
            <van-nav-bar
            title="视频专区"
            left-text="返回"
            left-arrow
            @click-left= "clickLeft"
            :fixed="true"
            />
            <form action="/">
                <van-search
                    v-model="value"
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    @cancel="onCancel"
                />
            </form>

            <van-swipe-cell>
                <van-card
                    class="goods-card"
                    thumb="http://demo.dtcms.net/upload/201504/20/thumb_201504200046589514.jpg"
                    @click="showPopup"
                />
            </van-swipe-cell>

            <van-swipe-cell>
                <van-card
                    desc="描述信息"
                    class="goods-card"
                    thumb="http://demo.dtcms.net/upload/201504/20/thumb_201504200318534459.jpg"
                    @click="showPopup"
                />
            </van-swipe-cell>

            <van-swipe-cell>
                <van-card
                    class="goods-card"
                    thumb="http://demo.dtcms.net/upload/201504/20/thumb_201504200059017695.jpg"
                    @click="showPopup"
                />
            </van-swipe-cell>

            <van-swipe-cell>
                <van-card
                    class="goods-card"
                    thumb="https://img.yzcdn.cn/vant/cat.jpeg"
                    @click="showPopup"
                />
            </van-swipe-cell>

            <van-swipe-cell>
                <van-card
                    class="goods-card"
                    thumb="http://demo.dtcms.net/upload/201504/20/thumb_201504200253026047.jpg"
                    @click="showPopup"
                />
            </van-swipe-cell>
            <van-popup v-model="show">
                <video width="100%" height="100%" controls="controls">
                    <source src="../../assets/aa.mp4" type="video/mp4" />
                    <source src="movie.ogg" type="video/ogg" />
                    <source src="movie.webm" type="video/webm" />
                    <object data="../../assets/aa.mp4" width="100%" height="100%">
                        <embed src="movie.swf" width="100%" height="100%" />
                    </object>
                </video>
            </van-popup>
        </van-row>
    </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      show: false,
      value: ''
    }
  },
  methods: {
    onSearch (val) {
      Toast(val)
    },
    onCancel () {
      Toast('取消')
    },
    showPopup () {
      this.show = true
    },

    // 返回
    clickLeft () {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-swipe-cell__wrapper{
    margin: 10px;
}
/deep/.van-card__thumb {
    width: 100%;
}
/deep/.van-popup--center {
    width: 83%;
}
.videos{
    width: 100%;
    height: 100%;
}
</style>
